<template>
  <transition :name="`popup-${position}`">
    <div class="popup" ref="popup"
         v-if="value"
         @click="handleClick"
         :style="modelStyle">
      <i class="el-icon-close" @click="closePopup"></i>
      <slot></slot>
    </div>
  </transition>
</template>

<script>

export default {
  name: 'popup',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    position: {
      type: String,
      default: 'bottom',
      validator(value) {
        return [
          'bottom',
          'top',
          'left',
          'right'
        ].indexOf(value) > -1
      }
    },
    closeWhenClicked: {
      type: Boolean,
      default: false
    },
    cover: {
      type: String,
      default: '100%'
    },
    onShow: {
      type: Function,
      default: () => {}
    },
    onHide: {
      type: Function,
      default: () => {}
    },
    styles:{
      type: Object,
      default: () => {}
//      default:function () {
//        let stylesObj={position:'fixed',
//          backgroundColor:'#f8f9fa',
//          left:0,
//          right:0,
//          top:0,
//          bottom:0,
//          zIndex:'9',
//          overflow:'auto'}
//        return stylesObj
//      }
    }
  },
  computed: {
    modelStyle() {
      let style = {
        position:this.styles.position|| 'fixed',
        backgroundColor:this.styles.backgroundColor||'#f8f9fa',
        left: this.styles.left||0,
        right: this.styles.right||0,
        top: this.styles.top||0,
        bottom: this.styles.bottom||0,
        zIndex: this.styles.zIndex||'9',
        overflow:'auto',
      }
      switch (this.position) {
        case 'bottom':
          delete style.top
          style.height = this.cover
          break
        case 'top':
          delete style.bottom
          style.height = this.cover
          break
        case 'left':
          delete style.right
          style.width = this.cover
          break
        case 'right':
          delete style.left
          style.width = this.cover
          break
      }
      return style
    }
  },
  mounted() {
  },
  methods: {
    handleClick() {
      if(this.closeWhenClicked) {
        this.$emit('input', false)
      }
    },
    closePopup(){
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="scss">
.popup-bottom-enter-active{
  transform: translate3d(0, 0, 0);
  transition: all .45s ease-out;
}
.popup-bottom-leave-active {
  transform: translate3d(0, 100%, 0);
  transition: all .45s ease-out;
}
.popup-bottom-enter {
  transform: translate3d(0, 100%, 0);
}
.popup-bottom-leave {
  transform: translate3d(0, 0, 0);
}

.popup-top-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all .45s ease-out;
}
.popup-top-leave-active {
  transform: translate3d(0, -100%, 0);
  transition: all .45s ease-out;
}
.popup-top-enter {
  transform: translate3d(0, -100%, 0);
}
.popup-top-leave {
  transform: translate3d(0, 0, 0);
}

.popup-right-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all .45s ease-out;
}
.popup-right-leave-active {
  transform: translate3d(100%, 0, 0);
  transition: all .45s ease-out;
}
.popup-right-enter {
  transform: translate3d(100%, 0, 0);
}
.popup-right-leave {
  transform: translate3d(0, 0, 0);
}

.popup-left-enter-active {
  transform: translate3d(0, 0, 0);
  transition: all .45s ease-out;
}
.popup-left-leave-active {
  transform: translate3d(-100%, 0, 0);
  transition: all .45s ease-out;
}
.popup-left-enter {
  transform: translate3d(-100%, 0, 0);
}
.popup-left-leave {
  transform: translate3d(0, 0, 0);
}
</style>
